<template>
	<view class="charts">
		<f2 :init="initChart" :charts="chartCopyData" />
	</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue'
	export default {
		name: 'ChartRadar',
		props: {
			chartData: Object
		},
		components: {
			f2
		},
		data() {
			return {};
		},
		created() {},
		computed: {
			chartCopyData() {
				return this.chartData.data;
			}
		},
		methods: {
			initChart(F2, config) {
				const chart = new F2.Chart(config)
				chart.source(this.chartData.data);
				chart.tooltip({
					background: {
						radius: 4,
						fill: '#fcfcfc',
						padding: [6, 10],
						shadowColor: 'rgba(0, 0, 0, 0.2)',
						shadowBlur: 20
					},
					titleStyle: {
						fontSize: 14,
						fill: '#555555',
						textAlign: 'start',
						textBaseline: 'top'
					},
					nameStyle: {
						fontSize: 14,
						fill: '#555555',
						textAlign: 'start',
						textBaseline: 'middle'
					},
					valueStyle: {
						fontSize: 14,
						fill: '#555555',
						textAlign: 'start',
						textBaseline: 'middle'
					},
					onShow: (obj) => {
						obj.items[0].name = obj.items[0].origin[this.chartData.x];
						obj.items[0].value += this.chartData.unit;
					}
				});
				chart.coord('polar');
				chart.scale(this.chartData.y, {
					min: 0
				});
				chart.axis(this.chartData.y, {
					grid: {
						lineDash: null,
						stroke: '#999999'
					},
					label: null,
					line: null
				});
				chart.axis(this.chartData.x, {
					grid: null,
					label: (text) => {
						const cfg = {
							fill: '#555555',
							fontSize: 12
						};
						if (text.length > 6) {
							cfg.text = text.slice(0, 5) + '...'
						}
						return cfg;
					},
					line: null
				});
				chart.line().position(this.chartData.x + '*' + this.chartData.y).color(this.chartData.color);
				chart.point().position(this.chartData.x + '*' + this.chartData.y).color(this.chartData.color);
				chart.render();
				return chart
			}
		}
	}
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
	}
</style>
